﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>年年有余</title>
    <!--<link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css">-->
    <!--<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>-->
    <!--<style type="text/css">-->
        <!--.layui-header {-->
            <!--width: calc(100% - 180px);-->
            <!--height: 45px;-->
            <!--top: 15px;-->
            <!--left: 0;-->
        <!--}-->

        <!--.layui-input,-->
        <!--.layui-form-label {-->
            <!--height: 28px;-->
            <!--line-height: 28px;-->
        <!--}-->

        <!--.layui-input-block {-->
            <!--width: 120px;-->
            <!--margin-left: 55px;-->
            <!--padding-top: 9px;-->
        <!--}-->

        <!--.layui-form-label {-->
            <!--width: 50px;-->
            <!--padding: 9px 0 9px 0;-->
            <!--text-align: left;-->
        <!--}-->

        <!--/*.layui-table th,-->
        <!--.layui-table td {-->
            <!--text-align: center;-->
        <!--}*/-->

        <!--.layui-btn-sm i {-->
            <!--font-size: 13px !important;-->
        <!--}-->

        <!--.layui-btn-sm {-->
            <!--height: 27px;-->
            <!--line-height: 27px;-->
            <!--font-size: 13px;-->
        <!--}-->

        <!--.layui-btn-sm {-->
            <!--margin-left: 10px;-->
        <!--}-->

        <!--.voucher-add {-->
            <!--margin-left: 20px;-->
        <!--}-->

        <!--#account {-->
            <!--background-size: 20px 16px;-->
            <!--background: url(/finance/public/static/imgs/dateicon.png) no-repeat 86px 3px;-->
        <!--}-->

        <!--@media screen and (max-width:991px) {-->
            <!--.layui-header {-->
                <!--position: fixed;-->
                <!--top: 15px;-->
                <!--right: 10px;-->
                <!--width: 970px;-->
            <!--}-->

            <!--.layui-body {-->
                <!--width: 970px;-->
                <!--position: absolute;-->
                <!--left: 170px;-->
                <!--right: 10px;-->
                <!--overflow-x: auto;-->
            <!--}-->
        <!--}-->
    <!--</style>-->
</head>

<body>
    <div class="layui-header">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">账期：</label>
            <div class="layui-input-block" style="left: -10px">
                <input class="layui-input" type="text" id="account">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-search"></i>查询</button>
        </div>
        <div class="layui-form-item layui-inline voucher-add">
            <button class="layui-btn layui-btn-sm" type="button" onclick="addVoucher()">添加凭证</button>
        </div>
    </div>
    <div class="layui-body" style="top:70px; left: 0">
        <table class="layui-table" id="voucher" lay-filter="voucher"></table>
    </div>
    <script type="text/html" id="barVoucher">
        <a class="layui-btn layui-btn-xs" lay-event="details">详情</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        layui.use(['element', 'form', 'table', 'layer', 'laydate'], function() {
            var element = layui.element,
                laydate = layui.laydate,
                form = layui.form,
                table = layui.table;
            layer = layui.layer;
            $ = layui.jquery;

            laydate.render({
                elem: '#account',
                type: 'month',
                max: new Date() + 1,
                format: 'yyyy年M月',
                showBottom: false,
                value: new Date(),
                change: function(value, date, endDate) {
                    $('#account').val(value);
                    if ($(".layui-laydate").length) {
                        $(".layui-laydate").remove();
                    }
                }
            });

            table.render({
                elem: '#voucher',
                url: '/finance/public/index/voucher/queryVouchers', //数据接口
                // cellMinWidth: 115,
                page: true, //开启分页
                limits: [10, 50, 100],
                limit: 10,
                cols: [
                    [ //表头
                        { title: '序号', type: 'numbers', fixed: 'left' },
                        { field: 'voucher_id', title: '凭证号', sort: true, fixed: 'left' },
                        { field: 'digest', title: '摘要' },
                        { field: 'subject', title: '会计科目' },
                        { field: 'debit', title: '借方金额（单位：分）' },
                        { field: 'credit', title: '贷方金额（单位：分）' },
                        { field: 'footing_lower', title: '合计（单位：分）', },
                        { field: 'footing_upper', title: '合计（大写/单位：分）', minWidth: 130 },
                        { field: 'voucher_time', title: '日期', sort: true },
                        { field: 'prepard_by', title: '制单人', minWidth: 100 },
                        { fixed: 'right', title: '操作', toolbar: '#barVoucher', minWidth: 160 }
                    ]
                ],
            });
            //监听行工具事件
            table.on('tool(voucher)', function(obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确定删除？', { icon: 7 }, function(index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        title: '修改凭证',
                        shade: 0.5,
                        area: ['90%', '90%'],
                        content: 'editVoucher?id=' + data.id
                    });
                } else if (obj.event === 'details') {
                    layer.open({
                        type: 2,
                        title: '凭证详情',
                        shade: 0.5,
                        area: ['90%', '90%'],
                        content: 'detailsOfVoucher?id=' + data.id
                    });
                }
            });
        });
    </script>
    <script>
        function addVoucher() {
            layer.open({
                type: 2,
                title: '添加凭证',
                shadeClose: false,
                scrollbar: false,
                shade: 0.5,
                // closeBtn:1,
                area: ['90%', '90%'],
                content: 'addVoucher',
            });
        }
    </script>
</body>

</html>